import { UserOutlined } from "@ant-design/icons"
import { Col, Row, Tag } from "antd"

import abnormalImage from "@/assets/images/game/abnormal.png"
import { Toast } from "@/components/messages"
import { useLocale } from "@/locales"

const ReplayInfo = ({
	handStatus,
	isShowSeatCount,
	replayInfo
}: {
	handStatus: number
	isShowSeatCount: boolean
	replayInfo: any
}) => {
	const { newFormat } = useLocale()
	const copyToClipboard = () => {
		navigator.clipboard.writeText(replayInfo.handId).then(() => {
			Toast.info(newFormat("common.copy"))
		})
	}

	return (
		<>
			{replayInfo && (
				<div className="infoContent contentPadding">
					<Row className="infoRow">
						<Col span={19}>
							<div style={{ display: "block" }}>
								{replayInfo.clubName && <span className="text-color">{replayInfo.clubName}</span>}
								<br />
							</div>
							<div style={{ display: "block", paddingTop: "5px" }}>
								{replayInfo.handId && (
									<>
										<span className="text-color">
											{newFormat("dxn.game_list.hand_id")}: {replayInfo.handId}
										</span>
										<Tag className="copyButton" onClick={copyToClipboard}>
											{newFormat("common.tag.copy")}
										</Tag>
									</>
								)}
							</div>
							{handStatus === 2 && (
								<div className="showAbnormalImg">
									<img width={200} src={abnormalImage} />
								</div>
							)}
						</Col>
						<Col span={5}></Col>
					</Row>

					{isShowSeatCount && (
						<Row className="flexCenterLeft seatCountRow">
							<Col span={2}>
								{replayInfo.maxSeatCount && (
									<>
										<UserOutlined className="el-icon-user-solid iconColor userIcon" />
										<span className="text-white-color seat-count-size">{replayInfo.maxSeatCount}</span>
									</>
								)}
							</Col>
							<Col span={16} className="text-white-color scoreCol">
								{replayInfo.gameTypeName && (
									<>
										<span style={{ marginRight: "4px" }}>{replayInfo.gameTypeName}</span>
										{(replayInfo.gameType === 2001 || replayInfo.gameType === 2003) && (
											<span>
												{replayInfo.sbBlindScore}/{replayInfo.bbBlindScore}
												{replayInfo.isShowStraddleAmount ? `/ ${replayInfo.straddleAmount}` : ""}
												{replayInfo.isShowAnteScore && <span style={{ marginLeft: "3px" }}>{`(${replayInfo.anteScore})`}</span>}
											</span>
										)}
										{replayInfo.gameType !== 2001 && replayInfo.gameType !== 2003 && <span>{replayInfo.bbBlindScore}</span>}
									</>
								)}
							</Col>
							<Col span={6} className="flexCenterRight text-white-color">
								{replayInfo.handStartDateStr}
							</Col>
						</Row>
					)}
				</div>
			)}
		</>
	)
}

export default ReplayInfo
